<template>
  <!-- 生产单管理 -->
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button
          type="primary"
          @click="handleProduction"
          v-auth-button="['production/produceOrderManagement']"
          :disabled="selection.length == 0"
          >排产</el-button
        >
        <el-button
          type="primary"
          @click="handleProductionOut"
          v-auth-button="['production/produceOrderManagement']"
          :disabled="selection.length == 0"
          >外发</el-button
        >
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <!-- <el-input
            v-model="searchValue.search"
            placeholder="生产单名称"
            clearable
          ></el-input> -->
          <el-input
            v-model="searchValue.customerName"
            placeholder="客户名称"
            clearable
          ></el-input>
          <el-select
            v-model="searchValue.type"
            placeholder="请选择生产状态"
            style="width: 100%"
            clearable
          >
            <el-option label="待生产" :value="0" />
            <el-option label="生产中" :value="1" />
            <el-option label="生产完成" :value="2" />
          </el-select>
          <el-select
            v-model="searchValue.businessAdminId"
            placeholder="请选择业务员"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
          <el-date-picker
            v-model="searchValue.startTime"
            type="date"
            placeholder="选择开始日期"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          >
          </el-date-picker>
          <el-date-picker
            v-model="searchValue.endTime"
            type="date"
            placeholder="选择结束日期"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          >
          </el-date-picker>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="upsearch"
          ></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        row-key="id"
        stripe
        @selection-change="handleSelection"
        @row-dblclick="handleRowDblclick"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="checkSelectable"
        >
        </el-table-column>
        <!-- <el-table-column label="生产单号" prop="number" width="250">
        </el-table-column> -->
        <!-- <el-table-column label="生产单名称" prop="name" min-width="200"></el-table-column> -->
        <el-table-column label="合同名称" prop="contractName" min-width="150">
        </el-table-column>
        <!-- <el-table-column label="生产数量" prop="quantity" width="150">
        </el-table-column> -->
        <el-table-column label="生产状态" prop="type" width="200">
          <template #default="scope">
            <p v-if="scope.row.type == 0" style="color: #f56c6c">未生产</p>
            <p v-if="scope.row.type == 1" style="color: green">生产中</p>
            <p v-if="scope.row.type == 2" style="color: #2bd814">已完成</p>
          </template>
        </el-table-column>
        <el-table-column label="生产负责人" prop="responsibleName" width="150">
        </el-table-column>
        <el-table-column label="业务员" prop="applicantName" width="150">
        </el-table-column>
        <el-table-column label="生产截止时间" prop="endTime" width="200">
          <template #default="scope">
            <p
              v-if="
                new Date().getTime() >
                new Date(scope.row.endTime).getTime() - 48 * 60 * 60 * 1000
              "
              style="color: #f56c6c"
            >
              {{ scope.row.endTime }}
              <el-icon
                style="fill: #f56c6c"
                v-if="
                  new Date().getTime() >
                  new Date(scope.row.endTime).getTime() - 48 * 60 * 60 * 1000
                "
                ><sc-icon-urgent
              /></el-icon>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="约定交货时间" prop="deliveryTime" width="200">
          <template #default="scope">
            <p
              v-if="
                new Date().getTime() >
                new Date(scope.row.deliveryTime).getTime() - 48 * 60 * 60 * 1000
              "
              style="color: #f56c6c"
            >
              {{ scope.row.deliveryTime }}
              <el-icon
                style="fill: #f56c6c"
                v-if="
                  new Date().getTime() >
                  new Date(scope.row.endTime).getTime() - 48 * 60 * 60 * 1000
                "
                ><sc-icon-urgent
              /></el-icon>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="合同签订时间" prop="orderTime" width="200">
        </el-table-column>
        <!-- <el-table-column label="排产状态" prop="schedulingStatus" width="200">
          <template #default="scope">
            <p v-if="scope.row.schedulingStatus == 0">未排产</p>
            <p v-if="scope.row.schedulingStatus == 1" style="color: green">
              部分排产
            </p>
            <p v-if="scope.row.schedulingStatus == 2" style="color: #2bd814">
              已完成
            </p>
          </template>
        </el-table-column> -->
        <el-table-column label="发货状态" prop="deliverStatus" width="150">
          <template #default="scope">
            <p v-if="scope.row.deliverStatus == 0">待发货</p>
            <p v-if="scope.row.deliverStatus == 1" style="color: green">
              已发货
            </p>
            <p v-if="scope.row.deliverStatus == 2" style="color: #2bd814">
              发货完成
            </p>
          </template>
        </el-table-column>

        <el-table-column label="来源" prop="source" width="150">
          <template #default="scope">
            <p v-if="scope.row.source == 0">合同</p>
            <p v-if="scope.row.source == 1">退货单</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="300">
          <template #default="scope">
            <el-button-group>
              <!-- finishedStatus 生产完成状态  0未完成，1部分完成 2全部完成 -->
              <el-button
                text
                type="primary"
                size="small"
                @click="table_deliver(scope.row, scope.$index)"
                v-auth-button="['send/produceOrderManagement']"
                v-if="
                  scope.row.type != 0 &&
                  scope.row.deliverStatus != 2 &&
                  scope.row.source == 0 &&
                  scope.row.finishedStatus != 0
                "
                >发货</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="table_show(scope.row, scope.$index)"
                v-auth-button="['show/produceOrderManagement']"
                >查看清单</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="table_showAll(scope.row, scope.$index)"
                >查看合同</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <production-dialog
    ref="productionDialog"
    @success="handleSaveSuccess"
  ></production-dialog>

  <production-out-dialog
    ref="productionOutDialog"
    @success="handleSaveSuccess"
  ></production-out-dialog>
  <products ref="products"></products>
</template>

<script>
import productionDialog from './components/productionDialog.vue'
import productionOutDialog from './components/productionOutDialog.vue'
import products from './components/products.vue'
export default {
  name: 'produceOrderManagement',
  components: {
    productionDialog,
    productionOutDialog,
    products
  },
  data () {
    return {
      dialog: {
        show: false
      },
      apiObj: this.$API.produce.getProduceOrderList,
      searchValue: {
        search: null,
        type: '',
        customerName: '',
        startTime: '',
        endTime: '',
        businessAdminId: ''//业务员id
      },
      selection: [],
      userList: [],
      productList: [],//产品清单

    }
  },
  mounted () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      let res = await this.$API.user.getAdminList.get()
      this.userList = res.data
    },

    // 排产
    handleProduction () {
      this.$refs.productionDialog.open(this.selection)
    },

    // 外发
    handleProductionOut () {
      this.$refs.productionOutDialog.open(this.selection)
    },

    // 发货
    table_deliver (row) {
      // source,//来源 0合同 1退货
      this.$router.push({
        path: '/produce/produceOrderManagement/deliverAdd',
        query: {
          mode: 'add',
          produceId: row.id,
          source: 0
        }
      })
    },

    //查看
    table_show (row) {
      // this.$router.push({
      //   path: '/produce/produceOrderManagement/produceOrderDetail',
      //   query: {
      //     id: row.id
      //   }
      // })
      this.$refs.products.open(row)
    },

    // 查看合同总详情
    table_showAll (row) {
      this.$router.push({
        path: '/contract/contractManagement/detailList',
        query: {
          id: row.contractId
        }
      })
    },

    // 选择生产单
    handleSelection (list) {
      this.selection = list
    },

    // 判断生产单是否可被选择
    checkSelectable (row) {
      return row.type != 2 && row.schedulingStatus != 2
    },


    //搜索
    upsearch () {
      this.$refs.table.upData(this.searchValue)
    },

    //本地更新数据
    handleSaveSuccess () {
      this.$refs.table.refresh()
    },


    // 双击表格
    handleRowDblclick (row) {
      this.table_show(row)
    }

  }
}
</script>

<style lang='scss' scoped>
.innerTable {
  padding: 10px 0;
}
</style>
